import React, { Component, createRef } from 'react';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Form, Input, Space, message } from 'antd';
import Captcha from '@/components/Captcha'

// 引入url 接口地址对象
import url from '@/config/url'
import axios from '@/http/http'

// 引入js-cookie  (第三方包别人封装好的cookie)
import Cookies from 'js-cookie'

// 引入高阶组件强化函数
import { withRouter } from 'react-router-dom'

class Normallogin extends Component {
    state = {
        key: ''  //当前验证码对应的标识符
    }

    ref1 = createRef()
    render() {
        return (
            <div>
                <Form
                    name="normal_login"
                    className="login-form"
                    initialValues={{
                        remember: true,
                    }}
                    onFinish={this.onFinish}
                >
                    <Form.Item
                        name="username"
                        rules={[
                            {
                                required: true,
                                message: '请输入用户名!',
                            },
                        ]}
                    >
                        <Input size='large' prefix={<UserOutlined className="site-form-item-icon" />} placeholder="用户名" />
                    </Form.Item>
                    <Form.Item
                        name="password"
                        rules={[
                            {
                                required: true,
                                message: '请输入密码!',
                            },
                        ]}
                    >
                        <Input
                            prefix={<LockOutlined className="site-form-item-icon" />}
                            type="password"
                            placeholder="密码"
                            size='large'
                        />
                    </Form.Item>
                    <Space>
                        <Form.Item
                            name="captcha"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入验证码!',
                                },
                            ]}
                        >
                            <Input
                                prefix={<LockOutlined className="site-form-item-icon" />}
                                type="text"
                                placeholder="验证码"
                                size='large'
                            />

                        </Form.Item>
                        <Form.Item>
                            {/* 验证码组件 */}
                            <Captcha getKey={this.getKey} w={'120px'} ref={this.ref1}></Captcha>
                        </Form.Item>
                    </Space>
                    <Form.Item>
                        <Button block type="primary" size='large' htmlType="submit" className="login-form-button">
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        );
    };
    getKey = (key) => {
        // console.log('父组件', key)
        this.setState({
            key: key
        })
    }
    // 登录事件
    onFinish = (values) => {
        // console.log('Received values of form: ', values);
        values.key = this.state.key
        console.log(values)
        axios.post(url.pwdLogin, values).then(res => {
            // 01: 提示登录成功
            // 02: 将后端返回的token(jsonwebtoken==jwt)
            // 03: 将登录后的用户对用的菜单项数组存到本地;
            // 04: 登录成功后跳转到首页
            console.log(res)
            if (res.data.errNo === 0) {
                //登录成功
                message.success('登录成功!', 1);
                // 将登录成功后返回的jwt(jsonwentoken) 存在本地cookie
                Cookies.set('jwt', res.data.context.jwt);
                // 
                localStorage.setItem('acl', JSON.stringify(res.data.context.acl))
                // 跳转到首页
                // 注意: 只有通过路由跳转过来的页面组件它的props属性上才有 那3个路由参数对象 history location match
                // 如果需要使通过witthRouter 高阶组件强化函数 包裹该组件,这样该组件就有了那3个路由参数信息对象了
                this.props.history.push('/dashboard')
            } else {
                // 登录失败
                message.error(res.data.errText, 2)
                //重新刷新验证码
                // console.log(this.ref1)
                this.ref1.current.loadCaptcha()
            }


        }).catch(e => { })

    };
}

export default withRouter(Normallogin);
